import { StyleSheet } from 'react-native';
import { autoSize } from "./common";
import { SCREEN_WIDTH } from "../../constant";
export const dynamicStyles = StyleSheet.create({
    item: {
        display: 'flex',
        backgroundColor: '#fff',
        padding: 10,
    },
    userInfo: {
        alignItems: 'center',
    },
    avatar: {
        width: autoSize(65),
        height: autoSize(65),
        backgroundColor: 'rgb(224,224,224)',
        borderRadius: autoSize(32.5),
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center'
    },
    name: {
        color: '#000',
        fontSize: 16,
        fontWeight: '500',
        marginBottom: 2,
    },
    company: {
        color: '#333',
        fontSize: 14,
        marginBottom: 2,
    },
    time: {
        color: '#999',
        fontSize: 14,
        marginBottom: 2,
    },
    contentContainer: {
        padding: 20,
    },
    like: {
        marginRight: 20,
        marginLeft: 20,
        color: '#333'
    },
    isLiked: {
        color: '#DAC228'
    },
    comment: {
        marginRight: 20,
    },
    content: {
        color: '#333',
        fontSize: 20,
        marginBottom: 2,
    },
    userInfoTextInfo: {
        paddingHorizontal: 10,
        flex: 1,
        position: 'relative',
    },
    more: {
        position: 'absolute',
        right: 0,
        top: 0,
    },
    bottom: {
        paddingVertical: 20,
    },
    translate: {
        color: '#000',
        fontSize: 14,
        marginTop: 10,
    }
});
export const postingsStyles = StyleSheet.create({
    inputContainer: {
        padding: 20,
    },
    textInPut: {
        display: 'flex',
        flex: 1,
        fontSize: 15
    },
    toolBar: {
        height: autoSize(40),
        backgroundColor: '#F5F4F5',
        alignItems: 'center',
        paddingHorizontal: 20
    },
    selectedImageContainer: {
        position: 'absolute',
        right: 10,
        bottom: 10,
        height: SCREEN_WIDTH / 3,
        width: SCREEN_WIDTH / 3,
        backgroundColor: 'transparent',
    },
    selectedImage: {
        height: SCREEN_WIDTH / 3,
        width: SCREEN_WIDTH / 3,
    },
    selectedImageDelete: {
        backgroundColor: '#000',
        height: 25,
        width: 25,
        borderRadius: 12.5,
        borderColor: '#fff',
        borderWidth: 5,
        position: 'absolute',
        left: -10,
        top: -10,
        zIndex: 1
    },
});
export const postingsInputProps = {
    autoCapitalize: 'none',
    autoFocus: true,
    multiline: true,
    style: postingsStyles.textInPut,
};
export const filterButton = StyleSheet.create({
    position: {
        position: 'absolute',
        bottom: 20,
        left: autoSize((375 - 110) / 2),
    },
    container: {
        width: autoSize(110),
        height: autoSize(40),
        backgroundColor: '#000',
        borderRadius: autoSize(20),
        shadowColor: '#000',
        shadowOpacity: 0.4,
        shadowOffset: { height: 0 },
        shadowRadius: 2,
    }
});
export const noActiveStyles = StyleSheet.create({
    container: {
        display: 'flex',
        height: SCREEN_WIDTH,
    },
    iconContainer: {
        backgroundColor: '#fff',
        width: autoSize(80),
        height: autoSize(80),
        borderRadius: autoSize(40)
    }
});
export const activeFilterStyles = StyleSheet.create({
    listItem: {
        height: autoSize(60),
        backgroundColor: '#fff',
        alignItems: 'flex-start',
    },
    listItemText: {
        color: '#333'
    },
    active: {
        color: '#DAC228'
    },
    item: {
        backgroundColor: '#fff',
    },
    itemIconContainer: {
        width: autoSize(40),
        height: autoSize(40),
    }
});
export const activeStyles = StyleSheet.create({
    listItem: {
        padding: 15
    },
    header: {
        backgroundColor: '#E0E0E0',
        borderBottomWidth: 2,
        borderBottomColor: '#F4F4F4'
    },
    content: {
        height: autoSize(100),
    },
    item: {
        backgroundColor: '#fff',
    }
});
